<script setup>
// 导入 todo 样式
import "./style/index.css";
import { ref } from "vue";
// 代办任务列表
const todoList = ref([
  { id: 321, name: "吃饭", finished: false },
  { id: 666, name: "睡觉", finished: true },
  { id: 195, name: "打豆豆", finished: false },
]);
const title = ref("");
const add = () => {
  //去除title前后的空格
  const content = title.value.trim();
  //先判断content是否为空
  if (content.length === 0) {
    alert("输入不能为空");
    return;
  }
  //将对象添加到数组中
  todoList.value.push({
    name: content,
    id: Date.now(),
    finished: false,
  });
  //将输入框清空
  title.value = "";
};
//删除某个任务
const onDel = (i) => {
  if (confirm("您确定要删除吗")) {
    todoList.value.splice(i, 1);
  }
};
//清空
const clear = () => {
  todoList.value = [];
};
//统计有多少任务
const sum = () => {
  return todoList.value.length;
};
</script>
<template>
  <section clsss="todoapp">
    <header class="header">
      <h1>比特人记事本</h1>
      <input placeholder="请输入任务" class="new-todo" v-model="title" />
      <button class="add" v-on:click="add">添加任务</button>
    </header>
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in todoList">
          <div class="view">
            <span class="index">{{ index + 1 }}</span>
            <label>{{ item.name }}</label>
            <button class="destroy" v-on:click="onDel(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count"
        >合 计: <strong> {{ sum() }} </strong></span
      >
      <button class="clear-completed" v-on:click="clear">清空任务</button>
    </footer>
  </section>
</template>
